<template>
  <div id="detail">
    <div class="mainbg" style="height:auto;">
      <!-- 最顶的导航栏 -->
      <Navbar :title="title" />
        <!-- 顶部的图片及描述 -->
      <TitleImg :titleImg="seriesclasstop" style="margin-top:46px;" />
        <!-- tab选项卡组件 -->
      <Tab :labelTitles="tabs">
        <!-- 简介槽 -->
        <template v-slot:Introduction>
          <!-- 教程标题 -->
          <DetailTitle :titleInfo='titleInfo'></DetailTitle>
          <!-- 基础信息 -->
          <BaseInfo :baseinformation="detail_baseinfo" />
          <!-- 我们的服务 -->
          <OursService :sursservice="detail_myservice" />
          <!-- 教师团队 -->
          <TeacherTeam v-if="detail_teacherteam.maxTitle" :teacherInfo="detail_teacherteam" />

          <!-- 组件纵向拉开距离 -->
          <Row>
            <Col span="8">
              <div class="lineleft"></div>
            </Col>
            <Col span="16">
              <div class="lineright"></div>
            </Col>
          </Row>

          <!-- 导师团队 -->
          <TutorTeam v-if="detail_tutorteam.maxTitle" :tutorInfo="detail_tutorteam"/>

          <!-- 适合你的学习方式 -->
          <LearningMode v-if="detail_learningmode.minTitle" :learning="detail_learningmode" style="padding-bottom:10px;" />

          <!-- 组件纵向拉开距离 -->
          <Row>
            <Col span="8">
              <div class="lineleft"></div>
            </Col>
            <Col span="16">
              <div class="lineright"></div>
            </Col>
          </Row>
          <!-- 组件纵向拉开距离 -->
          <Row v-for="(item,index) in 6" :key="index">
            <Col span="24">&nbsp</Col>
          </Row>
        </template>
        <!-- 目录槽 -->
        <template v-slot:Directory>
          <div>
            <!--  临时测试index和 下面index冲突 所以加上无用的div -->
            <stageCard :stageInfo="detail_stage" v-for="(item,index) in 10" :key="index" />
          </div>

          <Row v-for="(item,index) in 6" :key="index">
            <Col span="24">&nbsp</Col>
          </Row>
        </template>
        <!-- 评价槽 -->
        <template v-slot:Appraise>
          <!-- 滚动组件 -->
          <appraiseScroll>
            <!-- 这里又使用槽的方式 -->
            <template v-slot:leaveMessageSlot>
              <LeaveMessage :leaveMsg="detail_leavemsg" />
            </template>
          </appraiseScroll>

          <Row v-for="(item,index) in 6" :key="index">
            <Col span="24">&nbsp</Col>
          </Row>
        </template>
        <!-- 常见问题槽 -->
        <template v-slot:Question>
          <!-- 滚动组件 -->
          <appraiseScroll>
            <template v-slot:leaveMessageSlot>
              <!-- 问题信息组件 -->
              <QuestionMessage :questInfo="detail_question" />
            </template>
          </appraiseScroll>

          <Row v-for="(item,index) in 6" :key="index">
            <Col span="24">&nbsp</Col>
          </Row>
        </template>
      </Tab>
    </div>
  </div>
</template>

<script>
//头部导航
import Navbar from "../../components/Navbars/Navbar/Navbar";
//Banner图标
import TitleImg from "../../components/Detail/TitleImg/TitleImg";
//Tab切换标签组件
import Tab from "../../components/Tabs/Tab/Tab";
//-------------------------
//标题组件
import DetailTitle from "../../components/Detail/Introduction/DetailTitle/Detailtitle";
//基本信息组件
import BaseInfo from "../../components/Detail/Introduction/BaseInfo/BaseInfo";
//我们的服务组件
import OursService from "../../components/Detail/Introduction/OursService/OursService";
//讲师团队组件
import TeacherTeam from "../../components/Detail/Introduction/TeacherTeam/TeacherTeam";
//导师团队组件
import TutorTeam from "../../components/Detail/Introduction/TutorTeam/TutorTeam";
//学习模式组件
import LearningMode from "../../components/Detail/Introduction/LearningMode/LearningMode";
//-------------------------
//目录标签里的卡片组件
import stageCard from "../../components/Detail/Directory/stageCard";
//-------------------------
//评论标签组件
import appraiseScroll from "../../components/Detail/Appraise/appraiseScroll";
import LeaveMessage from "../../components/Detail/Appraise/Leavemessage";
//-------------------------
import QuestionMessage from "../../components/Detail/Question/QuestionMessage";
//-------------------------
//布局组件
import { Row, Col, Button } from "view-design";
//导入vuex actions  state
import {mapActions,mapState} from 'vuex';

export default {
  //组件注册
  components: {
    //------
    Navbar,
    TitleImg,
    Tab,
    //------
    DetailTitle,
    BaseInfo,
    OursService,
    TeacherTeam,
    TutorTeam,
    LearningMode,
    //------
    stageCard,
    //------
    appraiseScroll,
    LeaveMessage,
    //------
    QuestionMessage,
    //------
    Row,
    Col,
    Button
  },
  data() {
    return {
      //网站标题
      title: "路飞学城",
    
    };
  },
  computed: mapState({
    //vuex中获取标题
    titleInfo(state){
      return state.detail_head;
    },
    //vuex中获取顶部图片信息
    seriesclasstop(state){
      return state.seriesclasstop;
    },
    //vuex中获取tab切换列表
    tabs(state){
      return state.tabs
    },
    //vuex中获取基础信息
    detail_baseinfo(state){
      return state.detail_baseinfo;
    },
    //vuex中获取我们的服务
    detail_myservice(state){
      return state.detail_myservice;
    },
    //vuex中获取讲师团队
    detail_teacherteam(state){
      return state.detail_teacherteam;
    },
    //vuex中获取导师团队
    detail_tutorteam(state){
      return state.detail_tutorteam;
    },
    //vuex中获取适合你的学习模式
    detail_learningmode(state){
      return state.detail_learningmode;
    },
    //vuex中获取目录数据
    detail_stage(state){
      return state.detail_stage;
    },
    //vuex中获取评价数据
    detail_leavemsg(state){
      return state.detail_leavemsg;
    },
    //vuex中获取常见问题
    detail_question(state){
      return state.detail_question;
    },
  }),
  watch: {},
  methods: {
    //函数注册
    ...mapActions(['reqServerData'])
  },
  created() {},
  mounted() {
    //就业课程内部详页顶部图片描述
    params = {
      method:'get',
      methodName:'Seriesclasstop',
      param:[]
    }
    this.reqServerData(params);
    //就业课程内部详页的tabs内容
    let params = {
      method:'get',
      methodName:'Tabs',
      param:[]
    }
    this.reqServerData(params);
    //就业课程内部详页顶部标题信息
    params = {
      method:'get',
      methodName:'Detail_head',
      param:[]
    }
    this.reqServerData(params);
    //就业课程内部详页标基础内容
    params = {
      method:'get',
      methodName:'Detail_baseinfo',
      param:[]
    }
    this.reqServerData(params);
    //就业课程内容部详页我们的服务
    params = {
      method:'get',
      methodName:'Detail_myservice',
      param:[]
    }
    this.reqServerData(params);
    //就业课程内容部详页讲师团队
    params = {
      method:'get',
      methodName:'Detail_teacherteam',
      param:[]
    }
    this.reqServerData(params);
    //就业课程内容部详页导师团队
    params = {
      method:'get',
      methodName:'Detail_tutorteam',
      param:[]
    }
    this.reqServerData(params);
    //就业课程内容部详页学习方式
    params = {
      method:'get',
      methodName:'Detail_learningmode',
      param:[]
    }
    this.reqServerData(params);
    //就业课程目录tab里的数据
    params = {
      method:'get',
      methodName:'Detail_stage',
      param:[]
    }
    this.reqServerData(params);
    //就业课程评价tab里的数据
    params = {
      method:'get',
      methodName:'Detail_leavemsg',
      param:[]
    }
    this.reqServerData(params);
    //就业课程[常见问题]tab里的数据
    params = {
      method:'get',
      methodName:'Detail_question',
      param:[]
    }
    this.reqServerData(params);

    //插入测试
    // params = {
    //   method:'post',
    //   methodName:'insertDetail_question',
    //   param:[{
    //       questTitle: "什么是就业班课程？",
    //       content:
    //         "路飞学城就业班课程是业内优先推出“在线一对一VIP辅导”的全新教学模式的课程，通过为零基础的学员制定学习计划，提供系统性课程、一对一辅导、审阅代码、闯关式学习、答疑、推荐就业等服务，有效保障学员通过学习就业班的课程后具备独立完成项目与企业所需的技术水准。"
    //     }]
     
    // }
 
    //this.reqServerData(params);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* 导入基础CSS样式文件 */
@import "../../../static/base.css";
/* 局部UI样式修改 */
.lineleft {
  height: 5px;
  background-color: #72d9c2;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  margin-left: 20px;
}
.lineright {
  height: 5px;
  background-color: #bcc9d4;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  margin-right: 20px;
}
</style>